<template>
  <div class="qinlv-create-container">
    <div class="input-group">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item label="景点城市">
          <el-input v-model="listQuery.scenicSpotCity" placeholder="请输入景点城市"></el-input>
        </el-form-item>
        <el-form-item label="景点名称">
          <el-input v-model="listQuery.scenicSpotName" placeholder="景点名称"></el-input>
        </el-form-item>
        <el-form-item label="到达日期">
          <el-date-picker v-model="listQuery.arrivalDate" type="date" placeholder="到达日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <template #icon>
              <el-icon><Search /></el-icon>
            </template>
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="exportData">导出数据</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 按钮组 -->
    <div class="button-group">
      <button
        v-for="(button, index) in buttons"
        :key="index"
        :class="`button-color-${getButtonColor(index)}`"
        @click="moveComponentToFront(index)"
      >
        {{ button.text }}
      </button>
    </div>

    <!-- 左侧画布容器 -->
    <div ref="pageContainer" class="page-container">
      <!-- 固定放置的框组件 -->
      <div
        v-for="(component, index) in components"
        :key="component.id"
        class="fixed-component"
        :class="`color-${getColor(index)}`"
        :style="{ order: index === selectedComponentIndex ? 1 : null }"
        :title="component.tooltip"
      >
        {{ component.name }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Sortable from 'sortablejs';
import { ElForm, ElFormItem, ElButton, ElIcon, ElDatePicker, ElInput } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import axios from 'axios';

export default {
  name: 'QinlvCreate',
  components: {
    ElForm,
    ElFormItem,
    ElButton,
    ElIcon,
    ElDatePicker,
    ElInput,
    Search
  },
  setup() {
    const components = ref([
      { id: 1, name: '简介', tooltip: '这里是景点的简介信息。' },
      { id: 2, name: '是什么', tooltip: '这里是关于景点的详细信息。' },
      { id: 3, name: '文化', tooltip: '这里是景点的文化背景信息。' },
      { id: 4, name: '周边', tooltip: '这里是景点周边的信息。' },
      { id: 5, name: '交通', tooltip: '这里是景点的交通信息。' },
      { id: 6, name: '地址', tooltip: '这里是景点的地址信息。' },
      { id: 7, name: '餐厅', tooltip: '这里是景点附近的餐厅信息。' },
      { id: 8, name: '美食', tooltip: '这里是景点附近的美食信息。' },
      { id: 9, name: '内容', tooltip: '这里是景点的详细内容信息。' },
    ]);

    const buttons = ref([
      { text: '简介' },
      { text: '是什么' },
      { text: '文化' },
      { text: '周边' },
      { text: '交通' },
      { text: '地址' },
      { text: '餐厅' },
      { text: '美食' },
      { text: '内容' },
    ]);

    const selectedComponentIndex = ref(null);
    const pageContainer = ref(null);
    const listQuery = ref({
      scenicSpotCity: '',
      scenicSpotName: '',
      arrivalDate: '',
    });

    const dialogVisible = ref(false);
    const selectedComponentDetails = ref('');
    onMounted(() => {
      if (pageContainer.value) {
        Sortable.create(pageContainer.value, {
          group: 'shared',
          animation: 150,
          fallbackOnBody: true,
          swapThreshold: 0.65,
          inplaceSwap: true,
          onMove: function (evt) {
            return evt.related && evt.related.dataset.id !== evt.draggedContext.item.dataset.id;
          },
        });
      }
    });

    const moveComponentToFront = (index) => {
      selectedComponentIndex.value = index;
    };

    const getButtonColor = (index) => {
      const colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
      return colors[index % colors.length];
    };

    const getColor = (index) => {
      const colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
      return colors[index % colors.length];
    };

    const handleSearch = () => {
      const payload = {
        parameters: {
          destination_city: listQuery.value.scenicSpotCity,
          scenicSpotCount: listQuery.value.scenicSpotName,
          arrivalDate: listQuery.value.arrivalDate
        },
        workflow_id: "7458921199965077567"
      };

      axios.post('http://127.0.0.1:8000/qa/workflow/', payload, {
        headers: {
          'Authorization': 'Bearer pat_dbZ1Wj6rlWMhgaJapB6HzmyJSv3mwQyi3hzVmcgcKfrTQ7RuInR0IItKXlAaq34M',
          'Content-Type': 'application/json',
        }
      })
        .then(response => {
          console.log(response.data);
          if (response.data.code === 2) {
            renderDataOnComponents(response.data.data);
          } else {
            console.error('Failed to fetch data:', response.data.msg);
          }
        })
        .catch(error => {
          console.error('Error fetching data:', error);
          console.error('Error stack:', error.stack);
        });
    };

    const exportData = () => {
      const payload = {
        parameters: {
          destination_city: listQuery.value.scenicSpotCity,
          scenicSpotCount: listQuery.value.scenicSpotName,
          arrivalDate: listQuery.value.arrivalDate
        }
      };
      axios.post('http://127.0.0.1:8000/qa/export-data/', payload, {
        headers: {
          'Authorization': 'Bearer pat_dbZ1Wj6rlWMhgaJapB6HzmyJSv3mwQyi3hzVmcgcKfrTQ7RuInR0IItKXlAaq34M',
          'Content-Type': 'application/json',
        },
        responseType: 'blob'  //设置响应类型为 blob，以便处理文件下载
      })
        .then(response => {
          // 创建一个 a 标签，用于下载文件
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'exported_data.txt'); // 设置下载文件名为 .txt 格式
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(error => {
          console.error('导出失败', error);
        });
    };
    const renderDataOnComponents = (data) => {
      const dataArray = Object.entries(data).map((([key, value], index) => ({
        id: index + 1,
        name: value,
        tooltip: value,
      })));
      components.value = dataArray;
    };

    return {
      components,
      buttons,
      selectedComponentIndex,
      pageContainer,
      listQuery,
      dialogVisible,
      selectedComponentDetails,
      moveComponentToFront,
      getButtonColor,
      getColor,
      handleSearch,
      exportData,
    };
  }
}
</script>

<style scoped>
.qinlv-create-container {
  padding: 20px;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

:deep(.el-form-item) {
  margin-right: 10px;
}

:deep(.el-input__inner),
:deep(.el-date-picker) {
  border-radius: 4px 0 0 4px;
}

:deep(.el-input__inner:last-child),
:deep(.el-date-picker:last-child) {
  border-radius: 0 4px 4px 4px 0;
}

.search-button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f5f5fa;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-button:hover {
  background-color: #d0e0e0;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  flex: 1;
  min-width: 100px;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.button-color-0 { background-color: #ffcccc; }
.button-color-1 { background-color: #ccffcc; }
.button-color-2 { background-color: #ccccff; }
.button-color-3 { background-color: #ffffcc; }
.button-color-4 { background-color: #ffccff; }
.button-color-5 { background-color: #ccffff; }
.button-color-6 { background-color: #ffcccc; }
.button-color-7 { background-color: #ccffcc; }
.button-color-8 { background-color: #ffcc99; }
.button-color-9 {background-color: #99ccff; }

.page-container {
  flex: 1;
  border: 2px solid #ddd;
  padding: 30px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
  overflow-y: auto;
}

.fixed-component {
  flex: 1 1 300px;
  width: 300px;
  max-height: 200px;
  min-height: 100px;
  padding: 20px;
  border: 2px solid #91d5ff;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s, box-shadow 0.5s;
  transform-origin: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0, 0.1);
}

.fixed-component:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* 悬停阴影 */
}

.color-0 { background-color: #ffcccc; }
.color-1 { background-color: #ccffcc; }
.color-2 { background-color: #ccccff; }
.color-3 { background-color: #ffffcc; }
.color-4 { background-color: #ffccff; }
.color-5 { background-color: #ccffff; }
.color-6 { background-color: #ffcccc; }
.color-7 { background-color: #ccffcc; }
.color-8 { background-color: #ffcc99; }
.color-9 { background-color: #99ccff; }
</style>


